<!--
 * @Author: zheguo 3188606474@qq.com
 * @Date: 2024-04-20 08:35:47
 * @LastEditors: zheguo 3188606474@qq.com
 * @LastEditTime: 2024-04-20 10:26:52
 * @FilePath: \projectOne\myapp\src\components\Allin_component\AllinTabs.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>

    <div class="_tabs">

        <!-- <router-link custom to="/Allin/Login" v-slot="{ navigate, isActive = true }">
            <p @click="navigate" :class="isActive ? 'active' : ''">登录</p>
        </router-link>

        <router-link custom to="/Allin/register" v-slot="{ navigate, isActive = false }">
            <p @click="navigate" :class="isActive ? 'active' : ''">注册</p>
        </router-link> -->

        <p v-for="(data, index) in list" :key="data" @click="handle(index)" :class="count == index ? 'active' : ''">{{
            data
            }}
        </p>

    </div>

</template>

<script setup>
import { ref } from 'vue'
const list = ref(["登录", "注册"])
const count = ref(0)
const emit = defineEmits()
const handle = (index) => {
    count.value = index
    emit("TabsChange", index)
}
</script>

<style lang="scss" scoped>
.active {
    border-bottom: 4px solid #ff5c00;
    color: black !important;
}

._tabs {
    width: 120px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    position: relative;

    p {
        width: 50px;
        height: 35px;
        font-size: 25px;
        font-weight: 600;
        color: #ccc;
        text-align: center;
        cursor: pointer;
    }

}
</style>